<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function(){
            $("#all").click(function(){
                // if($("#all").prop("checked")){
                //     $("tbody input").prop("checked",true);
                // }else{
                //     $("tbody input").prop("checked",false);
                // }

                $("tbody input").prop("checked",$("#all").prop("checked"));
            });

            $("tbody input").click(function(){
                if($("tbody input:checked").length==$("tbody input").length){//被选中的个数和tbody中的input的个数相等的情况下
                    $("#all").prop("checked",true);
                }else{
                    $("#all").prop("checked",false);
                }
            });


        });
    </script>
</head>
<body>
    <table border="1" width="800">
        <thead>
        <tr>
            <th>
                <input type="checkbox" onclick="checkAll()" id="all">全选
            </th>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody align="center">
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>tom</td>
            <td>10</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
            <td>alice</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3</td>
            <td>coco</td>
            <td>14</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4</td>
            <td>lucy</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>5</td>
            <td>huahua</td>
            <td>15</td>
        </tr>
        </tbody>
    </table>
</body>
</html>